<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>书城 - 登录</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="div1">
    <h2 > 欢 迎 登 录 </h2>
    <input type="text" placeholder="账号"  class="form-control" v-model="username">
    <input type="password" placeholder="密码"  class="form-control" v-model="password">
    <input type="submit" value="登录" class="btn btn-primary" @click="login">
</div>

<script>
    new Vue({
        el:"#div1",
        data(){
           return{
               username:'',
               password:''
           }
        },
        methods:{
            login:function () {
                var that=this;
                axios.post("http://localhost:8080/login?username="+this.username+"&password="+this.password)
                    .then(
                    function (ans) {
                        if(ans.data=="success") window.location.href="main.html";
                        else {
                            alert("账号或密码错误，请重新登录");
                            that.password="";
                        }
                    },function (err) {
                        alert(err)
                    }
                )
            }
        }
    })
</script>
</body>
</html>